import React, { useState, useEffect, useRef } from 'react'
import { View, Text, Button, Input, Map } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AMAP_CONFIG } from '../../amap-config'
import AMapWX from '../../libs/amap-wx'
import './ditu.scss'

// H5地图组件的条件导入
const Ditu1 = process.env.TARO_ENV === 'h5' ? React.lazy(() => import('./ditu1')) : null

// 平台检测函数
const isH5 = () => {
  return process.env.TARO_ENV === 'h5'
}

const isMiniProgram = () => {
  return process.env.TARO_ENV === 'weapp'
}

interface MarkerData {
  id: number
  latitude: number
  longitude: number
  title: string
  iconPath: string
  width: number
  height: number
  callout?: {
    content: string
    color: string
    fontSize: number
    borderRadius: number
    bgColor: string
    padding: number
    display: 'BYCLICK' | 'ALWAYS'
  }
}

interface LocationData {
  latitude: number
  longitude: number
  name?: string
}

// 小程序地图组件
function MiniProgramDitu() {
  // 地图状态
  const [currentLocation, setCurrentLocation] = useState<LocationData>(AMAP_CONFIG.defaultLocation)
  const [markers, setMarkers] = useState<MarkerData[]>([])
  const [searchKeyword, setSearchKeyword] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  // 搜索历史状态 - 移到正确位置
// 删除重复声明的searchHistory状态
  
  // 地图配置
  const [mapConfig, setMapConfig] = useState({
    latitude: AMAP_CONFIG.defaultLocation.latitude,
    longitude: AMAP_CONFIG.defaultLocation.longitude,
    scale: 16,
    showLocation: true,
    showScale: true,
    showCompass: true,
    enableOverlooking: false,
    enableZoom: true,
    enableScroll: true,
    enableRotate: false,
    enableSatellite: false,
    enableTraffic: false
  })
  
  // 高德地图实例
  const amapRef = useRef<any>(null)
  
  useEffect(() => {
    // 初始化高德地图
    amapRef.current = new AMapWX({ key: AMAP_CONFIG.wxKey })
    
    // 获取当前位置
    getCurrentLocation()
    
    // 加载搜索历史
    loadSearchHistory()
  }, [])
  
  // 获取当前位置
  const getCurrentLocation = () => {
    setIsLoading(true)
    
    Taro.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log('获取位置成功:', res)
        const location = {
          latitude: res.latitude,
          longitude: res.longitude,
          name: '当前位置'
        }
        setCurrentLocation(location)
        setMapConfig(prev => ({
          ...prev,
          latitude: res.latitude,
          longitude: res.longitude
        }))
        
        // 搜索附近的维修店
        searchNearbyRepairShops(res.latitude, res.longitude)
      },
      fail: (err) => {
        console.error('获取位置失败:', err)
        Taro.showToast({
          title: '获取位置失败，使用默认位置',
          icon: 'none',
          duration: 2000
        })
        // 使用默认位置搜索
        searchNearbyRepairShops(AMAP_CONFIG.defaultLocation.latitude, AMAP_CONFIG.defaultLocation.longitude)
      },
      complete: () => {
        setIsLoading(false)
      }
    })
  }
  
  // 搜索附近的维修店 - 修改为自动弹出导航确认
  const searchNearbyRepairShops = (lat: number, lng: number) => {
    if (!amapRef.current) return
    setIsLoading(true)
    amapRef.current.getPoiAround({
      location: `${lng},${lat}`,
      radius: 10000, // 搜索半径10公里
      querytypes: '060100|060200|060300|060400', // 电子产品维修相关POI类型
      querykeywords: '手机维修|电脑维修|数码维修|电子产品维修|售后服务|手机售后|电脑售后',
      // 在searchNearbyRepairShops函数的success回调中
      success: (data: any) => {
        console.log('搜索维修店成功:', data)
        console.log('找到的POI数量:', data.markers ? data.markers.length : 0)
        
        if (!data.markers || data.markers.length === 0) {
          // 如果还是没找到，尝试更广泛的搜索
          searchWithBroaderTerms(lat, lng)
          return
        }
        
        // 在searchNearbyRepairShops函数中
        const newMarkers: MarkerData[] = data.markers.map((marker: any, index: number) => ({
          id: index,
          latitude: marker.latitude,
          longitude: marker.longitude,
          title: marker.name,
          iconPath: '',
          width: 30,
          height: 30,
          callout: {
            // 只显示店名和地址，不显示经纬度
            content: `${marker.name}${marker.address ? '\n' + marker.address : ''}${marker.tel ? '\n电话: ' + marker.tel : ''}`,
            color: '#333',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#fff',
            padding: 8,
            display: 'BYCLICK' as const  // 改为点击时显示
          }
        }))
        
        setMarkers(newMarkers)
        
        Taro.showToast({
          title: `找到 ${newMarkers.length} 个结果`,  // 修复：使用newMarkers而不是searchMarkers
          icon: 'success',
          duration: 2000
        })
        
        // 自动弹出导航到最近维修店的确认窗口
        setTimeout(() => {
          autoNavigateToNearestShop(newMarkers, lat, lng)
        }, 1800)
      },
      fail: (err: any) => {
        console.error('搜索维修店失败:', err)
        console.error('错误详情:', JSON.stringify(err))
        Taro.showToast({
          title: `搜索失败: ${err.errMsg || '网络错误'}`,
          icon: 'none',
          duration: 3000
        })
      },
      complete: () => {
        setIsLoading(false)
      }
    })
  }
  
  // 自动导航到最近的维修点
  const autoNavigateToNearestShop = (repairShops: MarkerData[], currentLat: number, currentLng: number) => {
    if (repairShops.length === 0) {
      return
    }
  
    // 计算距离并找到最近的维修点
    let nearestShop = repairShops[0]
    let minDistance = calculateDistance(currentLat, currentLng, nearestShop.latitude, nearestShop.longitude)
    
    repairShops.forEach(shop => {
      const distance = calculateDistance(currentLat, currentLng, shop.latitude, shop.longitude)
      if (distance < minDistance) {
        minDistance = distance
        nearestShop = shop
      }
    })
    
    // 自动弹出导航确认对话框
    Taro.showModal({
      title: '发现附近维修店',
      content: `离您最近的维修店是：${nearestShop.title}\n距离约${minDistance.toFixed(1)}公里\n\n是否立即导航到该位置？`,
      confirmText: '立即导航',
      cancelText: '稍后再说',
      confirmColor: '#007aff',
      success: (res) => {
        if (res.confirm) {
          // 用户点击确定，开始导航
          handleNavigation(nearestShop)
        } else {
          // 用户点击取消，显示提示
          Taro.showToast({
            title: '您可以点击地图上的标记进行导航',
            icon: 'none',
            duration: 2000
          })
        }
      },
      fail: (err) => {
        console.error('显示导航确认弹窗失败:', err)
      }
    })
  }
  
  // 修改广泛搜索函数，也添加自动导航功能
  const searchWithBroaderTerms = (lat: number, lng: number) => {
    amapRef.current.getPoiAround({
      location: `${lng},${lat}`,
      radius: 15000, // 扩大到15公里
      querykeywords: '手机|维修|修理|售后|数码',
      success: (data: any) => {
        console.log('广泛搜索结果:', data)
        
        if (!data.markers || data.markers.length === 0) {
          Taro.showToast({
            title: '附近15公里内暂无手机维修服务',
            icon: 'none',
            duration: 3000
          })
          return
        }
        
        const newMarkers: MarkerData[] = data.markers.map((marker: any, index: number) => ({
          id: index,
          latitude: marker.latitude,
          longitude: marker.longitude,
          title: marker.name,
          iconPath: '',
          width: 30,
          height: 30,
          callout: {
            content: marker.name,
            color: '#333',
            fontSize: 12,
            borderRadius: 4,
            bgColor: '#fff',
            padding: 8,
            display: 'BYCLICK' as const
          }
        }))
        
        setMarkers(newMarkers)
        
        Taro.showToast({
          title: `找到${data.markers.length}个相关服务`,
          icon: 'success',
          duration: 1500
        })
        
        // 广泛搜索也自动弹出导航确认
        setTimeout(() => {
          autoNavigateToNearestShop(newMarkers, lat, lng)
        }, 1800)
      },
      fail: (err: any) => {
        console.error('广泛搜索失败:', err)
        Taro.showToast({
          title: '搜索失败，请检查网络',
          icon: 'none',
          duration: 2000
        })
      }
    })
  }
  
  // 关键词搜索 - 完善版本
  const handleSearch = () => {
    if (!searchKeyword.trim()) {
      Taro.showToast({
        title: '请输入搜索关键词',
        icon: 'none',
        duration: 1500
      })
      return
    }
    
    setIsLoading(true)
    
    // 先尝试精确搜索
    searchByKeyword(searchKeyword.trim())
  }
  
  // 按关键词搜索POI
  const searchByKeyword = async (keyword: string) => {
    if (!amapRef.current) {
      setIsLoading(false)
      return
    }
    
    console.log('开始搜索关键词:', keyword)
    
    // 使用Web服务Key进行文本搜索，添加更精确的搜索参数
    Taro.request({
      url: `https://restapi.amap.com/v3/place/text`,
      method: 'GET',
      data: {
        key: AMAP_CONFIG.webKey,
        keywords: keyword,
        output: 'json',
        offset: 3,  // 限制返回结果数量为3个
        page: 1,    // 只取第一页
        extensions: 'all',  // 获取详细信息
        sortrule: 'distance'  // 按距离排序（如果有坐标）
      },
      timeout: 10000,
      success: (res: any) => {
        console.log('搜索响应:', res)
        
        // 检查HTTP状态码和高德API状态
        if (res.statusCode !== 200) {
          Taro.showModal({
            title: '请求失败',
            content: `HTTP状态码: ${res.statusCode}\n请检查网络连接和域名配置`,
            showCancel: false
          })
          return
        }
        
        if (!res.data || res.data.status !== '1') {
          Taro.showModal({
            title: 'API调用失败',
            content: `错误信息: ${res.data?.info || '未知错误'}\n错误代码: ${res.data?.infocode || 'N/A'}\n请检查Web服务Key配置和权限`,
            showCancel: false
          })
          return
        }
        
        // 检查是否有POI数据
        const pois = res.data.pois || []
        
        if (pois.length > 0) {
          console.log('找到POI数据:', pois.length, '个')
          
          // 进一步筛选：优先选择名称完全匹配或高度相关的结果
          const filteredPois = pois.filter((poi: any) => {
            const name = poi.name || ''
            const address = poi.address || ''
            
            // 优先级筛选：名称包含关键词或地址包含关键词
            return name.includes(keyword) || address.includes(keyword)
          }).slice(0, 1)  // 最多只取1个最相关的结果
          
          // 如果筛选后没有结果，则取原始结果的第一个
          const finalPois = filteredPois.length > 0 ? filteredPois : pois.slice(0, 1)
          
          const searchMarkers: MarkerData[] = finalPois.map((poi: any, index: number) => {
            // 更安全的坐标解析
            let lat = 0, lng = 0
            
            if (poi.location && typeof poi.location === 'string') {
              const coords = poi.location.split(',')
              if (coords.length >= 2) {
                lng = parseFloat(coords[0]) || 0
                lat = parseFloat(coords[1]) || 0
              }
            }
            
            // 验证坐标有效性
            if (lat === 0 || lng === 0 || isNaN(lat) || isNaN(lng)) {
              console.warn('无效坐标:', poi.name, poi.location)
              return null
            }
            
            console.log(`精选POI: ${poi.name} - 坐标: ${lat}, ${lng}`)
            
            return {
              id: index + 1000,
              latitude: lat,
              longitude: lng,
              title: poi.name || '未知地点',
              iconPath: '',
              width: 40,  // 增大标记尺寸，突出显示
              height: 40,
              callout: {
                // 只显示地点名称和地址，不显示经纬度
                content: `${poi.name || ''}${poi.address ? '\n' + poi.address : ''}${poi.tel ? '\n电话: ' + poi.tel : ''}`,
                color: '#333',
                fontSize: 14,
                borderRadius: 6,
                bgColor: '#fff',
                padding: 10,
                display: 'BYCLICK' as const  // 改为点击时显示
              }
            }
          }).filter(marker => marker !== null) as MarkerData[]
          
          if (searchMarkers.length > 0) {
            setMarkers(searchMarkers)
            
            // 移动到唯一结果
            const targetMarker = searchMarkers[0]
            setMapConfig(prev => ({
              ...prev,
              latitude: targetMarker.latitude,
              longitude: targetMarker.longitude,
              scale: 16  // 放大地图以突出显示唯一结果
            }))
            
            Taro.showToast({
              title: `精确定位: ${targetMarker.title}`,
              icon: 'success',
              duration: 3000
            })
          } else {
            // 所有坐标都无效
            handleSearchFallback(keyword)
          }
        } else {
          // 没有POI数据
          console.log('API返回无POI数据')
          Taro.showToast({
            title: '未找到相关地点',
            icon: 'none',
            duration: 2000
          })
        }
      },
      fail: (err: any) => {
        console.error('网络请求失败:', err)
        Taro.showModal({
          title: '网络请求失败',
          content: `错误信息: ${err.errMsg || '网络连接失败'}\n请检查网络连接和小程序域名配置`,
          showCancel: false
        })
      },
      complete: () => {
        setIsLoading(false)
      }
    })
  }
  
  // 新增：搜索失败后的备用方案
  const handleSearchFallback = (keyword: string) => {
    console.log('启动备用搜索方案')
    
    // 尝试使用周边搜索API
    const fallbackData = {
      key: AMAP_CONFIG.key,
      keywords: keyword,
      location: `${currentLocation.longitude},${currentLocation.latitude}`,
      radius: 50000, // 50公里范围
      output: 'json'
    }
    
    Taro.request({
      url: 'https://restapi.amap.com/v3/place/around',
      data: fallbackData,
      method: 'GET',
      success: (res: any) => {
        if (res.statusCode === 200 && res.data && res.data.pois && res.data.pois.length > 0) {
          console.log('备用搜索成功:', res.data.pois.length)
          // 处理备用搜索结果（代码类似上面）
          // ... 处理逻辑
          
          Taro.showToast({
            title: '已切换到周边搜索',
            icon: 'success'
          })
        } else {
          // 最终失败提示
          Taro.showModal({
            title: '搜索结果',
            content: `很抱歉，未能找到"${keyword}"相关信息\n\n建议：\n• 检查网络连接\n• 尝试其他关键词\n• 确认地点名称拼写`,
            showCancel: false,
            confirmText: '知道了'
          })
        }
      },
      fail: () => {
        Taro.showModal({
          title: '搜索失败',
          content: '网络连接异常，请检查网络后重试',
          showCancel: false
        })
      }
    })
  }
  
  // 清除搜索结果 - 增强版本
  const handleClearSearch = () => {
    console.log('清除搜索结果')
    setSearchKeyword('')
    
    // 显示清除提示
    Taro.showToast({
      title: '已清除搜索结果',
      icon: 'success',
      duration: 1000
    })
    
    // 恢复到维修店搜索结果
    setTimeout(() => {
      searchNearbyRepairShops(currentLocation.latitude, currentLocation.longitude)
    }, 1000)
  }
  
  // 搜索历史记录功能
  const [searchHistory, setSearchHistory] = useState<string[]>([])
  
  // 保存搜索历史
  const saveSearchHistory = (keyword: string) => {
    try {
      const newHistory = [keyword, ...searchHistory.filter(item => item !== keyword)].slice(0, 10)
      setSearchHistory(newHistory)
      Taro.setStorageSync('searchHistory', newHistory)
    } catch (error) {
      console.error('保存搜索历史失败:', error)
    }
  }
  
  // 加载搜索历史
  const loadSearchHistory = () => {
    try {
      const history = Taro.getStorageSync('searchHistory') || []
      setSearchHistory(Array.isArray(history) ? history : [])
    } catch (error) {
      console.error('加载搜索历史失败:', error)
      setSearchHistory([])
    }
  }
  
  // 在useEffect中加载搜索历史
  useEffect(() => {
    loadSearchHistory()
  }, [])
  
  // 修改handleSearch函数，添加历史记录保存
  const handleSearchWithHistory = () => {
    if (!searchKeyword.trim()) {
      Taro.showToast({
        title: '请输入搜索关键词',
        icon: 'none',
        duration: 1500
      })
      return
    }
    
    const keyword = searchKeyword.trim()
    console.log('开始搜索:', keyword)
    
    // 保存到搜索历史
    saveSearchHistory(keyword)
    
    setIsLoading(true)
    searchByKeyword(keyword)
  }
  
  // 显示搜索历史
  const showSearchHistory = () => {
    if (searchHistory.length === 0) {
      Taro.showToast({
        title: '暂无搜索历史',
        icon: 'none',
        duration: 1500
      })
      return
    }
    
    Taro.showActionSheet({
      itemList: [...searchHistory, '清空历史记录'],
      success: (res) => {
        if (res.tapIndex === searchHistory.length) {
          // 清空历史记录
          setSearchHistory([])
          Taro.removeStorageSync('searchHistory')
          Taro.showToast({
            title: '已清空搜索历史',
            icon: 'success',
            duration: 1500
          })
        } else {
          // 选择历史记录进行搜索
          const selectedKeyword = searchHistory[res.tapIndex]
          setSearchKeyword(selectedKeyword)
          searchByKeyword(selectedKeyword)
        }
      }
    })
  }
  
  // 标记点击事件 - 修复导航问题
  const handleMarkerTap = (e: any) => {
  console.log('标记点击事件:', e.detail)
  const markerId = e.detail.markerId
  const marker = markers.find(m => m.id === markerId)
  
  if (marker) {
    console.log('找到标记:', marker)
    Taro.showActionSheet({
      itemList: ['查看详情', '导航到此处', '复制地址'],
      success: (res) => {
        switch (res.tapIndex) {
          case 0:
            // 查看详情
            Taro.showModal({
              title: marker.title,
              content: `纬度: ${marker.latitude}\n经度: ${marker.longitude}`,
              showCancel: false
            })
            break
          case 1:
            // 导航功能
            handleNavigation(marker)
            break
          case 2:
            // 复制地址
            Taro.setClipboardData({
              data: `${marker.title} - 纬度:${marker.latitude}, 经度:${marker.longitude}`,
              success: () => {
                Taro.showToast({
                  title: '地址已复制',
                  icon: 'success'
                })
              }
            })
            break
        }
      }
    })
  } else {
    console.error('未找到对应的标记，markerId:', markerId)
    Taro.showToast({
      title: '无法获取位置信息',
      icon: 'none',
      duration: 2000
    })
  }
}

// 处理导航逻辑
const handleNavigation = (marker: MarkerData) => {
  // 检查当前环境
  const env = Taro.getEnv()
  
  if (env === Taro.ENV_TYPE.WEAPP) {
    // 微信小程序环境
    Taro.openLocation({
      latitude: marker.latitude,
      longitude: marker.longitude,
      name: marker.title,
      address: marker.title,
      scale: 18,
      success: () => {
        console.log('导航成功')
        Taro.showToast({
          title: '正在打开导航...',
          icon: 'success',
          duration: 1500
        })
      },
      fail: (err) => {
        console.error('微信导航失败:', err)
        // 降级到第三方地图
        openThirdPartyMap(marker)
      }
    })
  } else {
    // 其他环境使用第三方地图
    openThirdPartyMap(marker)
  }
}

// 打开第三方地图应用
const openThirdPartyMap = (marker: MarkerData) => {
  const lat = marker.latitude
  const lng = marker.longitude
  const name = encodeURIComponent(marker.title)
  
  // 构建不同地图应用的URL
  const mapUrls = {
    gaode: `https://uri.amap.com/navigation?to=${lng},${lat}&toname=${name}&mode=car`,
    baidu: `https://api.map.baidu.com/direction?destination=${lat},${lng}&mode=driving&region=全国&output=html`,
    tencent: `https://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${name}&tocoord=${lat},${lng}`,
    google: `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`
  }
  
  Taro.showActionSheet({
    itemList: ['高德地图', '百度地图', '腾讯地图', '复制坐标'],
    success: (res) => {
      let url = ''
      switch (res.tapIndex) {
        case 0:
          url = mapUrls.gaode
          break
        case 1:
          url = mapUrls.baidu
          break
        case 2:
          url = mapUrls.tencent
          break
        case 3:
          // 复制坐标
          Taro.setClipboardData({
            data: `${lat},${lng}`,
            success: () => {
              Taro.showToast({
                title: '坐标已复制',
                icon: 'success'
              })
            }
          })
          return
      }
      
      if (url) {
        // 尝试打开外部链接
        if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
          // 微信小程序中复制链接让用户手动打开
          Taro.setClipboardData({
            data: url,
            success: () => {
              Taro.showModal({
                title: '提示',
                content: '导航链接已复制到剪贴板，请在浏览器中打开',
                showCancel: false
              })
            }
          })
        } else {
          // H5环境直接跳转
          window.open(url, '_blank')
        }
      }
    }
  })
}

// 修改自动导航函数
const navigateToNearestRepairShop = (repairShops: MarkerData[]) => {
  if (repairShops.length === 0) {
    Taro.showToast({
      title: '未找到附近的维修点',
      icon: 'none',
      duration: 2000
    })
    return
  }

  // 计算距离并找到最近的维修点
  const currentLat = currentLocation.latitude
  const currentLng = currentLocation.longitude
  
  let nearestShop = repairShops[0]
  let minDistance = calculateDistance(currentLat, currentLng, nearestShop.latitude, nearestShop.longitude)
  
  repairShops.forEach(shop => {
    const distance = calculateDistance(currentLat, currentLng, shop.latitude, shop.longitude)
    if (distance < minDistance) {
      minDistance = distance
      nearestShop = shop
    }
  })
  
  // 显示确认对话框
  Taro.showModal({
    title: '自动导航',
    content: `发现最近的维修点：${nearestShop.title}（距离约${minDistance.toFixed(1)}公里），是否立即导航？`,
    confirmText: '导航',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        handleNavigation(nearestShop)
      }
    }
  })
}

// 计算两点间距离的辅助函数（单位：公里）
const calculateDistance = (lat1: number, lng1: number, lat2: number, lng2: number): number => {
  const R = 6371 // 地球半径（公里）
  const dLat = (lat2 - lat1) * Math.PI / 180
  const dLng = (lng2 - lng1) * Math.PI / 180
  const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
    Math.sin(dLng/2) * Math.sin(dLng/2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))
  return R * c
}
  
  // 返回首页
  const handleBack = () => {
    Taro.navigateBack()
  }
  
  return (
    <View className="ditu-container">
      {/* 头部 */}
      
      {/* 搜索栏 */}
      <View className="search-container">
        <View className="search-box">
          <Input
            className="search-input"
            placeholder="输入你要搜索的地点"
            value={searchKeyword}
            onInput={(e) => setSearchKeyword(e.detail.value)}
            confirmType="search"
            onConfirm={handleSearchWithHistory}
          />
          <Button 
            className="search-btn" 
            onClick={handleSearchWithHistory} 
            loading={isLoading}
          >
            搜索
          </Button>
          
        </View>
      </View>
      
      {/* 地图容器 */}
      <View className="map-container">
        <Map
          className="map"
          latitude={mapConfig.latitude}
          longitude={mapConfig.longitude}
          scale={mapConfig.scale}
          markers={markers as any}
          showLocation={mapConfig.showLocation}
          showScale={mapConfig.showScale}
          showCompass={mapConfig.showCompass}
          enableOverlooking={mapConfig.enableOverlooking}
          enableZoom={mapConfig.enableZoom}
          enableScroll={mapConfig.enableScroll}
          enableRotate={mapConfig.enableRotate}
          enableSatellite={mapConfig.enableSatellite}
          enableTraffic={mapConfig.enableTraffic}
          onMarkerTap={handleMarkerTap}
          onError={(e) => { console.error('地图组件错误', e) }}
        />
        
        {/* 地图控制按钮 */}
        <View className="map-controls">
          <Button className="control-btn location-btn" onClick={getCurrentLocation}>
            📍
          </Button>
          <Button 
            className="control-btn" 
            onClick={() => setMapConfig(prev => ({ ...prev, scale: Math.min(prev.scale + 2, 20) }))}
          >
            放大
          </Button>
          <Button 
            className="control-btn" 
            onClick={() => setMapConfig(prev => ({ ...prev, scale: Math.max(prev.scale - 2, 5) }))}
          >
            缩小
          </Button>
        </View>
      </View>
    </View>
  )
}

// 主导出组件 - 根据平台环境选择不同的地图组件
export default function Ditu() {
  // H5环境使用ditu1.tsx（Web地图）
  if (isH5()) {
    // 确保 Ditu1 组件已加载
    if (Ditu1) {
      return <Ditu1 />
    } else {
      return (
        <View style={{ 
          display: 'flex', 
          justifyContent: 'center', 
          alignItems: 'center', 
          height: '100vh',
          fontSize: '16px',
          color: '#666'
        }}>
          <Text>H5地图组件加载失败</Text>
        </View>
      )
    }
  }
  
  // 小程序环境使用原有的小程序地图组件
  if (isMiniProgram()) {
    return <MiniProgramDitu />
  }
  
  // 其他环境的降级处理
  return (
    <View style={{ 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center', 
      height: '100vh',
      fontSize: '16px',
      color: '#666'
    }}>
      <Text>当前环境不支持地图功能</Text>
    </View>
  )
}